<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: white;

		padding: 30rpx 25rpx;
	}

	scroll-view {
		width: 100%;
	}

	.box {
		width: 100%;
		padding:50rpx 20rpx;
		line-height: 60rpx;
	}

	.u-node {
		width: 14rpx;
		height: 14rpx;
		opacity: 1;
		background: #409eff;
		border-radius: 50%;
	}

	
	.box2{
		transform: translateY(-10rpx);
	}
	.line {
		width: 100%;
	
		.f28{
			width:50%;
		}
	}
</style>

<template>
	<view class="content">
		<view class="f34 bold" style="padding:0 30rpx;border-bottom: 1px solid #ccc;padding-bottom: 20rpx;">{{title}}
		</view>
		<scroll-view scroll-y="true" style="height:70vh">
			<view class="box">
				<u-time-line>
					<u-time-line-item v-for="item,index in process" :key="index">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node">
								
							</view>
						</template>
						<template v-slot:content>
							<view class="box2">
								<view class="gray f28">{{item.time}}</view>
								<view class="textColor">{{item.user | users}}</view>
								<view class="textColor">{{item.process | itemProcessShow}}</view>
								<view class="textColor" v-if="item.remark">{{item.remark}}</view>
						
								
							</view>
						</template>
					</u-time-line-item>
					
				</u-time-line>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				default: '付款历史'
			},
			process: {
				default: []
			}
		},
		data() {
			return {
				head: this.$head,


			}
		},
		created() {

		},

		methods: {

			submit() {


			},


		}
	}
</script>
